<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp" %> 


<c:set var="width" scope="page" value="${1000 / fn:length(CodeCountryMap)}"/>
<c:set var="widthInner" scope="page" value="${width * 0.9}"/>

<style type="text/css">
.outer {	
	margin: 0px auto;
	border: solid 0px #000000;
}    
.divScroll-3 {
	height:260px;	
	overflow:auto;
	white-space:nowrap;
	padding: 1px;
	font-size: 12px;

</style>
 
<script>
var cnt = 6;
function noSelected(code,name){	
	var width1 = 1000 / --cnt;
	var width2 = width1 * 0.9;	
	var img_no = "<img src='${appPath }/resource/image/checkbox_no.png'/>&nbsp;";	
	$("#noChooseRegion").append("<span id='span_"+code+"' style='cursor: pointer;' onclick=\"selected('"+code+"');\" >" + img_no + name + "&nbsp;&nbsp;</span>");	
	$("#td_" + code).hide();
	$(".codeCountryTd").css("width",width1 + "px");
	$(".outer").css("width",width2 + "px");
	$(".divScroll-3").css("width",width2 + "px");	
	$("#checkbox_" + code).prop("checked",false);
}

function selected(code,name_ch){
	var width1 = 1000 / ++cnt;
	var width2 = width1 * 0.9;	
	$("#span_" + code).remove();
	$("#td_" + code).show();	
	$(".codeCountryTd").css("width",width1 + "px");
	$(".outer").css("width",width2 + "px");
	$(".divScroll-3").css("width",width2 + "px");
	$("#checkbox_" + code).prop("checked",true);
}

function selectedCountry(code,name_ch){
	var _color = $("#dis_" + code).css("color");	
	
	//rgb(0, 128, 0) green
	//rgb(255, 0, 0) red
	
	if(_color == "green" || _color == 'rgb(0, 128, 0)'){
		var rem = "";
		var _a = '<span style="border: dotted 3px #0000FF;background-color:#FFFFFF;padding:5px;" class="spanSelected_'+code+'" >';
		//var _a = '<span style="background-color:#FFFFFF;padding-top:10px;padding-bottom:10px;" class="spanSelected_'+code+'" >';
		//_a += code + rem + "</span><span class=\"spanSelected_"+code+"\">&nbsp;&nbsp;</span>";		//* display code */
		_a += name_ch + rem + "</span><span class=\"spanSelected_"+code+"\">&nbsp;&nbsp;</span>";		//* display name_ch */
		//$("#selectedArea").prepend(_a);
		$("#selectedArea").append(_a);
		$("#dis_" + code).css({"color":"red"});
		var scc = $("#selectedCodeCountries").val();
		scc += code + ",";
		$("#selectedCodeCountries").val(scc);
		
		var scn = $("#selectedNameChCountries").val();
		scn += name_ch + ",";
		$("#selectedNameChCountries").val(scn);
		
	}else{
		$("#dis_" + code).css({"color":"green"});
		$(".spanSelected_" + code).remove();	
		var scc = $("#selectedCodeCountries").val();
		var scn = $("#selectedNameChCountries").val();	
		$("#selectedCodeCountries").val(scc.replace(code + ",",""));
		$("#selectedNameChCountries").val(scn.replace(name_ch + ",",""));
	}	
}

function codeCountrySubmit(){
	var sccArray = $("#selectedCodeCountries").val().split(",");  	//show code
	var scnArray = $("#selectedNameChCountries").val().split(",");		//show name_ch
	var scc = "";	
	for(var i=0;i< (sccArray.length - 1);i++){	
		var remove = "<a href='javascript:void(0);' onclick='removeCountryCode(\""+sccArray[i]+"\",\""+scnArray[i]+"\");'>[移除]</a>";
		if(i != 0){
			scc += "<span id='CC_"+sccArray[i]+"'>、" + scnArray[i] + remove + "</span>";	
		}else{
			scc += "<span id='CC_"+sccArray[i]+"'>" + scnArray[i] + remove + "</span>";
		}
		
	}
	$("#span_selectedCodeCountries").html(scc + "<br/>");
	$("#HintCountryOverlay").fadeOut('fast');
	
	$("#countries_code").val($("#selectedCodeCountries").val());
	$("#countries_name_ch").val($("#selectedNameChCountries").val());
	
	
}

</script>


<table>
	<tr>
		<c:forEach var="CodeCountries" items="${CodeCountryMap }" varStatus="s">
			<c:set var="isHide" value="${CodeCountries.key.hide ? 'display:none;' : ''}" />
			
		
			<td valign="top" style=";width:${ width}px;text-align: left;" id="td_${CodeCountries.key.code }" class="codeCountryTd" >
			
				<%-- 移除選項功能
				<span style="color:blue;cursor: pointer;" onclick="noSelected('${CodeCountries.key.code }','${CodeCountries.key.name_ch }');">
					<img src="${appPath }/resource/image/checkbox_yes.png" />
					${CodeCountries.key.name_ch }(${fn:length(CodeCountries.value)})
				</span>
				--%>
				
				<span style="color:blue;">
					${CodeCountries.key.name_ch }(${fn:length(CodeCountries.value)})
				</span>
				
				<div class="outer" style="width:${widthInner}px;">
					<div class="divScroll-3" style="width:${widthInner}px;">
						<c:forEach var="CodeCountriesInner" items="${CodeCountries.value }" >
						
							<c:if test="${CodeCountriesInner.selected}">
								<span style="cursor: pointer;color: red" id="dis_${CodeCountriesInner.code}" onclick="selectedCountry('${CodeCountriesInner.code}','${CodeCountriesInner.name_ch }');">
									${CodeCountriesInner.name_en}&nbsp;(${CodeCountriesInner.name_ch})
								</span>
							</c:if>		
							
												
							<c:if test="${!CodeCountriesInner.selected}">
								<span style="cursor: pointer;" id="dis_${CodeCountriesInner.code}" onclick="selectedCountry('${CodeCountriesInner.code}','${CodeCountriesInner.name_ch }');">
									${CodeCountriesInner.name_en}&nbsp;(${CodeCountriesInner.name_ch})
								</span>
							</c:if>
						
							<br/>							
						</c:forEach>
					</div>
				</div>
			<td>
		</c:forEach>
	</tr>
</table>


<div align="left">
	<c:forEach var="CodeCountries" items="${CodeCountryMap }">
		<input type="checkbox" value="${CodeCountries.key.code }" id="checkbox_${CodeCountries.key.code }" class="regions" style="display:none;"
			<c:if test="${!CodeCountries.key.hide}">
				checked="checked"
			</c:if>
		/>
	</c:forEach>
</div>

<input type="hidden" id="selectedCodeCountries" value="${CodeCountriesCodeSelected }"/>
<input type="hidden" id="selectedNameChCountries" value="${CodeCountriesNameChSelected }"/>

